

/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick 2.15
import QtQuick.Controls 2.15
import Timer 1.0

Rectangle {
    width: Constants.width
    height: Constants.height
    property alias tumblerSecond: tumblerSecond
    property alias tumblerMinute: tumblerMinute
    property alias tumblerHour: tumblerHour
    property alias buttonStart: buttonStart

    Component {
        id: delegateComponent
        Label {
            text: modelData.toString().length < 2 ? "0" + modelData : modelData
            opacity: 1.0 - Math.abs(
                         Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.pixelSize: 60 - 15 * (Math.abs(Tumbler.displacement)
                                       / (Tumbler.tumbler.visibleItemCount / 2))
        }
    }

    Button {
        id: buttonStart
        x: 463
        y: 2114
        width: 295
        height: 160
        visible: true
        text: qsTr("Start")
        font.pixelSize: 60
        highlighted: false
        flat: false
        checkable: false
    }

    Tumbler {
        id: tumblerHour
        x: 154
        y: 819
        width: 161
        height: 820
        wrap: true
        topPadding: 0
        model: 24
        delegate: delegateComponent
    }

    Tumbler {
        id: tumblerMinute
        x: 546
        y: 832
        width: 160
        height: 793
        font.pixelSize: 60
        topPadding: 0
        font.bold: false
        model: 60
        delegate: delegateComponent
    }

    Tumbler {
        id: tumblerSecond
        x: 996
        y: 865
        width: 106
        height: 755
        font.pixelSize: 60
        topPadding: 0
        font.bold: false
        model: 60
        delegate: delegateComponent
    }

    Label {
        id: labelHour
        x: 384
        y: 1224
        text: qsTr("时")
        font.pixelSize: 40
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }

    Label {
        id: labelMinute
        x: 814
        y: 1193
        width: 76
        height: 72
        text: qsTr("分")
        font.pixelSize: 40
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        wrapMode: Text.NoWrap
        renderType: Text.QtRendering
    }

    Label {
        id: labelSecond
        x: 1149
        y: 1212
        text: qsTr("秒")
        font.pixelSize: 40
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
}
